<template>
   <t-adaptive-page
        v-loading="state.loading"
        class="menu_mange"
        tableTitle="合同条款"
        row-key="path"
        isCopy
        ref="tAdaptivePageRef"
        isExpansion
        :isTTableSelfFilling="false"
        :isShowPagination="false"
        columnSetting
        :table="state.table"
        :columns="state.table.columns"
        isShowWidthSize
        :opts="opts"
        :widthSize="4"
        :listTypeInfo="state.listTypeInfo"
        @submit="conditionEnter"
        @selection-change="selecUpdateChange"
    >
      <template #CreateDate="{scope}">
        <div>{{ parseTime(scope.row.CreateDate) }}</div>
      </template>
      <template #Days="{scope}">
       <el-input-number v-model="scope.row.Days" :disabled=" scope.row.ContractType !== '10007'" placeholder="请输入天数" style="width: 100%"></el-input-number>
      </template>


      <template #footerBtn>
        <el-button type="danger" @click="add" v-if="checkPermission('新增', state.roleList)">新增</el-button>
        <el-button type="danger" @click="addHandle()" v-if="checkPermission('新增', state.roleList)">保存</el-button>
        <el-button type="danger" @click="deleteHandles" v-if="checkPermission('删除', state.roleList)" :disabled="!state.ids.length">删除</el-button>

        <el-button type="primary" @click="conditionEnter">查询</el-button>
        <el-button type="danger" @click="tAdaptivePageRef.TQueryConditionPage.resetHandle()">重置</el-button>
      </template>

       <template #select1="{ scope }">
        <el-select v-model="state.queryData.Code" placeholder="请选择">
        <el-option
            v-for="item in state.listTypeInfo.TKLXList"
            :key="item.Code"
            :label="item.Name"
            :value="item.Code">
          </el-option>
        </el-select>
      </template>

     <!--  新增 / 修改-->
     <template #operator="{ scope }">
       <el-button type="primary"  link v-if="checkPermission('删除', state.roleList)" @click="deleteHandles(scope.row)">删除</el-button>
     </template>

    </t-adaptive-page>
  </template>

  <script setup lang="tsx">
  import {computed, onMounted, reactive, ref, toRefs, unref, watch} from "vue"
  import {getTKType,DelTK,SaveTK,getTK,userRole} from "@/api/base"
  import {parseTime,checkPermission} from "@/utils/util";
  import {cubasdocStore} from "@/stores/modules/cubasdoc";
  import {ElMessage, ElMessageBox} from "element-plus";
  const tAdaptivePageRef: any = ref(null)
  const selectTable = ref()


  const cubasdoc = cubasdocStore()


  import type { UploadProps, UploadUserFile } from 'element-plus'

  const handleDelete = (row: any) => {

    state.clumTable.data.splice(state.clumTable.data.indexOf(row), 1)
  }


  //表格配置
  const state: any = reactive({
    roleList: [],
    queryData: {
      Code: '', // 条款类型编码
      Name: '', // 条款内容
    },
    table: {
      border: true,
      // 接口返回数据
      data: [],
      firstColumn: { type: "selection", fixed: true },
      // 表头数据
      columns: [
        { prop: "TypeCode", label: "合同类型", minWidth: 120
          , canEdit: true,
          configEdit: {
            label: "合同类型",
            type: "select-arr",
            editComponent: "el-select",
            list: "HTLXList",
            event: "HTLXList",
            arrLabel: "Name",
            arrKey: "Code"
          }
        },
        { prop: "ContractType", label: "条款类型", minWidth: 120
          , canEdit: true,
          configEdit: {
            label: "条款类型",
            type: "select-arr",
            editComponent: "el-select",
            list: "TKLXList",
            event: "TKLXList",
            arrLabel: "Name",
            arrKey: "Code"
          }
        },
        { prop: "Content", label: "条款内容",minWidth: 500
          ,canEdit: true,
          configEdit: {
            label: "开始编号",
            type: "textarea",
            editComponent: "el-input"
          }
        },
        { prop: "Days", label: "天数",
          minWidth: 150,
          canEdit: true,
          configEdit: {
            label: "天数",
            type: "input",
            editComponent: "el-input",
            editSlotName: "Days",

          }
        },
        { prop: "operator", label: "操作  ",minWidth: 120,slotName: "operator"}
      ],
      // 操作列样式
      operatorConfig: {
        fixed: "right", // 固定列表右边（left则固定在左边）
        width: 100,
        label: "操作"
      },

    },
    loading:false,
    title: "发货验收详情信息",
    dialogSelectEnt:false,

    coseData:[],
    defaultSelectVal:[],
    ids:[],
    uploadValue:null,
    listTypeInfo: {
        HTLXList: [
          {
            Name: "销售合同",
            Code: "0"
          },
          {
            Name: "采购合同",
            Code: "1"
          }
        ],
        TKLXList: [
        ]
      },

  })


  //

  //表单配置
  const opts = ref({
    Code: {
      label: "条款类型编码",
      placeholder: "请选择条款类型",
      comp: "t-select",
      slotName: "select1"
    },
    Name: {
      label: "条款类型内容",
      comp: "el-input"
    }

  })

  //选择项
  const cusoptions = ref([])
  //是否签收
  const IsQS = ref(true)
  // 最终参数获取
  const getQueryData = computed(() => {
    const { Code, Name } = toRefs(
        state.queryData
    )
    return {
      Code: Code.value??'',
      Name: Name.value??''
    }
  })

  // 点击查询按钮
  const conditionEnter = (data: any) => {
    getData()
  }

  //页面加载查询后端数据
  onMounted(() => {
    getData()
    getTKs()
    initRoleList()
  })

  // 获取数据
  const getData = async () => {
    state.loading = true


    let data=await getTK(getQueryData.value);

    if (data.Code==='OK'){

      state.table.data = data.Data
    }
    state.loading = false
  }

  // 获取数据
  const getTKs = async () => {
      state.loading = true

      let data=await getTKType({Code:'',Name:''});

      if (data.Code==='OK'){

        state.listTypeInfo.TKLXList = data.Data
        // options = data.Data
      }
      state.loading = false
    }


  //打开新增窗口
  async function addHandle() {


    let {Code}= await SaveTK(state.table.data)
    if (Code==='OK'){
      ElNotification.success({
        title: '提示',
        message:  '保存成功',
        offset: 200,
      })

      await getData()

    }

  }



  // 添加数据条数
  const num = ref(1)
  const singleEdit: any = ref(null)
  // 添加数据
  const add = () => {
    if (num.value > 0) {
      for (let i = 0; i < num.value; i++) {
        state.table.data.unshift({Id:null,Content:'',TypeCode:'0',ContractType:'',Remark:'',CreateBy:'admin',CreateDate:null})
      }
    }
  }



  //下拉表格选择数据
  const selecUpdateChange = (e) => {
    state.ids = e.map(item=>item.Id)

  }

  const initRoleList = async () => {
    let res = await userRole({ VT_ID: '条款管理' })
    state.roleList = res.items
  }
  //删除表单
   function deleteHandles(row) {

    const ids = row.Id ? [row.Id] : state.ids;


    ElMessageBox.confirm(
        '请仔细核对数据，删除后无法恢复！',
        '审核提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          DelTK({Ids:ids})
          ElNotification.success({
            title: '提示',
            message: '删除成功',
            offset: 200,
          })
          setTimeout(() => {
            getData()
            // 这里执行下一步操作
          }, 1000); // 等待3秒

        })
        .catch(() => {

        })
  }

  </script>

  <style lang="scss" scoped>
  .single_edit_demo {
    .add_data {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
    }
  }
  </style>
